<template>
  <div>
    <div class="grid-view">
      <div class="photo-item" v-for="(item, index) in resList">
        <img :src="item">
        <div class="icon-view" v-show="showDelete || showPreview">
          <i class="el-icon-delete icon-item" v-show="showDelete" @click="handleRemove(index)" />
          <i class="el-icon-search icon-item" v-show="showPreview" @click="handlePictureCardPreview(item)" />
        </div>
      </div>
      <div v-show="!hideUploadIcon">
        <el-upload :action="''" :before-upload="beforeAvatarUpload" :http-request="uploadImage" :show-file-list="false">
          <div class="photo-add-item">
            <i class="el-icon-plus"></i>
          </div>
        </el-upload>
      </div>
    </div>

    <el-dialog append-to-body title="" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

import axios from "axios";
const URL = require("../../utils/request").default.baseURL
const defaultUrl = URL + 'api/server/img/upload';

export default {
  name: "XUpload",
  props: {
    maxFileSize: {
      type: Number,
      default: 500
    },
    limit: {
      type: Number,
      default: 1
    },
    uploadUrl: {
      type: String,
      default: defaultUrl
    },
    showPreview: {
      type: Boolean,
      default: true,
    },
    showDelete: {
      type: Boolean,
      default: true,
    },
    value: {
      type: null
    }
  },
  data () {
    return {
      hideUploadIcon: false,
      dialogImageUrl: '',
      dialogVisible: false,
      resList: []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newVal, oldVal) {
        if (typeof newVal === "string") {
          if (newVal === "") {
            this.resList = [];
          } else {
            this.resList = [newVal];
          }
        } else if (newVal == undefined || newVal == null) {
          this.resList = [];
        } else if (Array.isArray(newVal)) {
          this.resList = newVal;
        }
        this.checkLimit();

      }
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      if (!isJPG && !isPNG) {
        this.$message.error("图片只能是jpeg或png");
      }
      return isJPG || isPNG
    },
    handleRemove (index) {
      this.resList.splice(index, 1);
      this.updateValue();
    },
    checkLimit () {
      this.hideUploadIcon = this.resList.length >= this.limit;
    },
    handlePictureCardPreview (item) {
      this.dialogImageUrl = item;
      this.dialogVisible = true;
    },
    uploadImage (params) {
      const form = new FormData();
      form.append('files', params.file);
      const uploadUrl = this.uploadUrl;
      axios.post(uploadUrl, form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }).then(response => {
        const data = response.data;
        if (data.code !== 200) {
          this.$message.error(data.msg);
          return;
        }
        this.$message.success(data.msg);
        const result = data.data;
        this.resList = result;
        this.updateValue();
      }).catch(error => {
        console.log(error);
        this.$message.error("上传失败:" + error);
      })
    },
    updateValue () {
      this.checkLimit();
      this.$emit("onChange", this.resList);
      // if (this.limit > 1) {
      //   if (this.resList.length <= 0) {
      //     this.$emit("input", "");
      //     return;
      //   }
      //   this.$emit("input", this.resList);
      // } else {
      //   if (this.resList.length <= 0) {
      //     this.$emit("input", "");
      //     return;
      //   }
      //   this.$emit("input", this.resList[0]);
      // }
      this.$emit("input", this.resList[0]);
    },
    getResultData () {
      return this.resList;
    },
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.hideUploadIcon {
  /deep/ .el-upload--picture-card {
    display: none;
    /* 上传按钮隐藏 */
  }
}

.grid-view {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  .photo-item {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    img {
      width: 100px;
      height: 100px;
    }

    .icon-view {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .5);
      opacity: 0;

      .icon-item {
        cursor: pointer;
        margin-left: 10px;
        margin-right: 10px;
        color: white;
      }
    }

    .icon-view:hover {
      opacity: 1;
    }
  }

  .photo-add-item {
    width: 100px;
    height: 100px;
    border: dashed 1px #C0CCDA;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
